<template>
	<view class="onlineRecharge-box">
		<view class="online-item">
			<view class="item-top">
				<text>2000</text>
				<text>充2000元送150元</text>
			</view>
			<view class="item-bottom">
				<text :style="{ 'font-size': textStyle + 'px' }">
					●&nbsp;线上支付&nbsp;
					●&nbsp;门店通用
				</text>
				<button @click="openPopup" size="mini">立即充值</button>
			</view>
		</view>
		<!-- 底部弹出框 -->
		<onlineRechargePopup ref="popupRef"/>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue"
	import onlineRechargePopup from "./onlineRechargePopup"
	/**
	 * useTo: 充值底部弹出框部分 
	 */
	let popupRef = ref()
	const openPopup = () => {
		popupRef.value?.open()
	}
	/**
	 * useTo: 适配宽屏 
	 */
	let textStyle = ref<number>(10) 
	onMounted(async () => {
		let { windowWidth } = await uni.getSystemInfo()
		  if (windowWidth === 768) {
			textStyle.value = 20
		  } else if (windowWidth === 834) {
			textStyle.value = 30
		  } else if (windowWidth === 1024) {
			textStyle.value = 40
		  }
	})
</script>

<style scoped lang="scss">
	.onlineRecharge-box {
		padding: 20px;
		box-sizing: border-box;
		.online-item {
			padding: 20px 20px;
			margin-bottom: 10px;
			border-radius: 11px;
			background-color: #fff;
			box-shadow: 0 0 10px 0 #e7e7e7;
			.item-top {
				@include columnFlex;
				padding-bottom: 20px;
				border-bottom: 1px solid #cccfd3;
				text {
					&:first-child {
						font-size: 25px;
						font-weight: 700;
						color: $uni-primary;
					}
					&:last-child {
						font-size: 15px;
						font-weight: 700;
					}
				}
			}
			.item-bottom {
				@include flex;
				align-items: center;
				padding-top: 10px;
				text {
					color: $uni-info;
				}
				button {
					margin: 0!important;
					padding: 0 10px!important;
					border-radius: 50rpx;
					background-color: $uni-primary;
					color: #fff;
				}
			}
		}
	}
</style>